<template>
  <div class="vue-box" style="display: none;" :style="'display: block;'">
    <div class="c-panel">
      <!-- ------------- 检索参数 ------------- -->
      <div class="c-title">任务日志</div>
      <el-form>
        <div class="c-item">
          <label class="c-label">任务名称：</label>
          <el-select v-model="p.jobId" placeholder="请选择任务类型">
            <el-option value="" label="不限"></el-option>
            <el-option
                v-for="item in jobList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="c-item">
          <label class="c-label">时间区间：</label>
          <el-date-picker
              v-model="p.createTimeList"
              type="daterange"
              align="right"
              unlink-panels
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div class="c-item" style="min-width: 10px;">
          <el-button type="primary" icon="el-icon-search" @click="f5">查询</el-button>
          <el-button type="info"  icon="el-icon-refresh"  @click="sa.f5Tab()">重置</el-button>
        </div>
      </el-form>
      <!-- ------------- 快捷按钮 ------------- -->
      <div class="fast-btn">
        <el-button type="warning" icon="el-icon-delete" @click="del('YI')">删除一个月前日志</el-button>
        <el-button type="warning" icon="el-icon-delete" @click="del('SAN')">删除三个月前日志</el-button>
        <el-button type="warning" icon="el-icon-delete" @click="del('LIU')">删除六个月前日志</el-button>
        <el-button type="warning" icon="el-icon-delete" @click="del('YEAR')">删除一年前日志</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="del('ALL')">清除全部日志</el-button>
      </div>
      <el-table
          :border="true"
          resizable
          ref="userTable"
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          max-height="450">
        <el-table-column
            prop="jobName"
            min-width="80"
            label="任务名称">
        </el-table-column>
        <el-table-column
            prop="beanName"
            min-width="80"
            label="bean名称">
        </el-table-column>
        <el-table-column
            prop="params"
            min-width="60"
            label="参数">
        </el-table-column>
        <el-table-column
            min-width="50"
            label="任务状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0">成功</el-tag>
            <el-tag type="danger" v-if="scope.row.status === 1">失败</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            prop="error"
            min-width="80"
            label="失败信息">
        </el-table-column>
        <el-table-column
            prop="times"
            min-width="80"
            label="耗时(单位：毫秒)">
        </el-table-column>

        <el-table-column
            prop="createTime"
            min-width="80"
            label="创建时间">
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination background
                       layout="total, prev, pager, next, sizes, jumper"
                       :current-page.sync="p.current"
                       :page-size.sync="p.size"
                       :total="p.total"
                       :page-sizes="[10, 20, 30, 40, 50, 100]"
                       @current-change="f5()"
                       @size-change="f5()">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
let PATH = "/task/log"
module.exports = {
  components: {},
  watch: {
    'p.jobId': function (val) {
      this.f5()
    },
    'p.createTimeList': function (val) {
      this.f5()
    }
  },
  data() {
    return {
      jobList: [],
      tableData: [],
      p: {
        jobId: '',
        createTimeList: '',
        current: 1,
        size: 10,
        total: -1
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  methods: {
    init(){
      sa.ajax(PATH+"/jobList",{},(res)=>{
        this.jobList = res.data
      },{msh: null,type:'get'})
    },
    del(id) {
      sa.confirm('是否确认？',()=>{
        sa.ajax(PATH + "/del", {type: id}, (res) => {
          sa.alert(res.msg, () => {
            this.f5()
          })
        }, {})
      })
    },
    show(id) {
      sa.ajax(PATH + "/get", {id: id}, (res) => {
        this.showData = res.data
      }, {type: 'get', msg: null})
    },
    f5() {
      this.init();
      sa.ajax(PATH + "/list", this.p, (res) => {
        this.tableData = res.data;
        this.p.total = res.dataCount
      }, {type: 'get'})
    }
  },
  mounted() {
  },
  created() {
    this.f5()
  }
}
</script>

<style scoped>
</style>
